{% extends "baseD.html" %}

{% block headtitle %}- Error Detection Test
			{% if scene.name %}
				({{scene.name}})
			{% endif %}
{% endblock %}

{% block css %}
	<link href="/live3dstatic/css/errorDet.css" rel="stylesheet" type="text/css" media="screen" />
{% endblock %}

{% block scripts %}
	<script type="text/javascript" src="/live3dstatic/scripts/helperFunctions.js"></script>
	<script type="text/javascript" src="/live3dstatic/scripts/viewScene.js"></script>
	<script type="text/javascript" src="/live3dstatic/scripts/amos.js"></script>

	<script type="text/javascript" src="/live3dstatic/scripts/matrix.js"></script>
	<script type="text/javascript" src="/live3dstatic/scripts/calibration.js"></script>
    
    <!-- To draw on the canvas -->
	<script type="text/javascript" src="/live3dstatic/scripts/canvas.js"></script>
    <script type="text/javascript" src="/live3dstatic/scripts/canvasPoint.js"></script>
    <script type="text/javascript" src="/live3dstatic/scripts/canvasPolygon.js"></script>
        
	<!--  This should be something else: modify3d maybe -->
    <script type="text/javascript" src="/live3dstatic/scripts/viewScene.js"></script>
    <!--  This is to draw on the GE window -->
    <script type="text/javascript" src="/live3dstatic/scripts/earth.js"></script>
    <script type="text/javascript" src="/live3dstatic/scripts/earthPoint.js"></script>
    <script type="text/javascript" src="/live3dstatic/scripts/earthPolygon.js"></script>
    
	<script type="text/javascript" src="/live3dstatic/scripts/errorDet2D.js"></script>
	
	<script type="text/javascript">
		var viewScene;
        var errorDet2D;
        
		loadImage('{{scene.url}}', init2D, null)

		function getFx(){
				var imW = getW();
				return imW/576.0;
		}
				
		function getFy(){
				var imH = getH();
				return imH/432.0;
		}
        
		{% if calibration %}
			var calib;
			function initCalibration(){
				var M = new Matrix(4,3, [[{{calibration.m11}}, {{calibration.m12}}, {{calibration.m13}}, {{calibration.m14}}], 
							 [{{calibration.m21}}, {{calibration.m22}}, {{calibration.m23}}, {{calibration.m24}}],
							 [{{calibration.m31}}, {{calibration.m32}}, {{calibration.m33}}, {{calibration.m34}}]]
						);
				var camCenter = {x: {{calibration.cameraX}}, y: {{calibration.cameraY}}, z: {{calibration.cameraZ}},
								lat: {{scene.cameraLatitude}}, lon: {{scene.cameraLongitude}}, alt: {{scene.cameraAltitude}}};
				var pitch = {{scene.cameraTilt}};
				var heading = {{scene.cameraHeading}};
				var origin = {lat: {{calibration.originLatitude}}, lon: {{calibration.originLongitude}}, alt: {{calibration.originAltitude}} };
				var width = {{scene.width}};
				var height = {{scene.height}};
				calib = new Calibration(M, camCenter, pitch, heading, origin, width, height)
			}
		{% endif %}
		
		function init3D(){
			viewScene = new ViewScene('{{scene.url}}', {{scene.index}})
			
			// add all the models.
			{% for mesh in meshes %}
				viewScene.addModel({{mesh.index}}, {{mesh.originLatitude}}, {{mesh.originLongitude}}, {{mesh.originAltitude}});
			{% endfor %}
			
			viewScene.makeRefresher();
			setInterval('viewScene.refreshImage()', 1000);
			
			//****** This puts the view up correctly ********
			{% if scene.calibrated %}
				initJumpToFull({{scene.cameraLatitude}}, {{scene.cameraLongitude}}, {{scene.cameraAltitude}}, {{scene.cameraRoll}}, {{scene.cameraTilt}}, {{scene.cameraHeading}});
			{% else %}
				jumpTo( {{scene.cameraLatitude}}, {{scene.cameraLongitude}} );		
			{% endif %}
			
			{% if calibration %}
				initCalibration();
			{% endif %}
            
			errorDet2D.unselectAllMeshes();
			errorDet2D.unselectAllPoints();
		}
        
        function init2D(){
			errorDet2D = new ErrorDet2D();
		
			// add all the correspondences.
			{% if scene.calibrated %}
				{% for corr in allCorrespondences %}
					errorDet2D.addPoint({{corr.index}}, {{corr.u}}, {{corr.v}}, {{corr.reprojectedU}}, {{corr.reprojectedV}}, {{corr.pixelProjectionError}}, {% ifequal corr.parentMeshes 0 %} true {% else %} false {% endifequal %})
				{% endfor %}
			{% else %}
				{% for corr in allCorrespondences %}
					errorDet2D.addPoint({{corr.index}}, {{corr.u}}, {{corr.v}}, {{corr.u}}, {{corr.v}}, 0, {% ifequal corr.parentMeshes 0 %} true {% else %} false {% endifequal %})
				{% endfor %}
			{% endif %}
			
			// add all the meshes.
			var mapping = null;
			{% for mesh in meshes %}
				mapping = new Array({%for m in mesh.correspondenceMapping%}{{m}}{%if not forloop.last%},{%endif%} {%endfor%});
				triangles = new Array({%for t in mesh.triangles%}{{t}}{%if not forloop.last%},{%endif%} {%endfor%});
				errorDet2D.addTriangle(mapping, triangles, {{mesh.index}})
			{% endfor %}
			
			errorDet2D.drawEverything();
            
			{% if scene.calibrated %}
				errorDet2D.fillInErrors();
			{% endif %}
			
			errorDet2D.unselectAllMeshes();
			errorDet2D.unselectAllPoints();
		}

	</script>
{% endblock %}

{% block onload %}googleInit(){% endblock %}

{% block divtitle %}- Error Detection Test
			{% if scene.name %}
				({{scene.name}})
			{% endif %}
{% endblock %}

{% block content %}
    <div id="contentpage" style="margin-left:40px; margin-right:40px;">
	{% if user %}
        <div id="above">
            <div id="leftside">
                <div id="imagepanel">
                    <canvas id='canvasObject'  width="100%" height="100%" onclick="errorDet2D.click(event,getFx(),getFy())">
                        Your browser does not support the canvas element, and cannot use this application.
                    </canvas>
                </div>
                
                <div id="optionsID">
					<div class="group">
						{% if meshes %}
								<h3>Meshes</h3><br/>
								<div class='optionspanel'>
										<table style="table-layout:fixed; width:100%">
											<tr> <th style="text-align:left; vertical-align:bottom;"> Name </th>
												{% if scene.calibrated %}
														<th style="text-align:center; vertical-align:bottom;"> Average Error</th>
												 {% endif %}
												 {% if admin %}
														<th style="text-align:right; vertical-align:bottom;"> Rewrite Mesh </th>
												 {% endif %}
											</tr>
											{% for mesh in meshes %}
												<tr>
													<td style="text-align:left; vertical-align:bottom;">
														<input type="checkbox" name="meshCheckList" id="mesh{{ mesh.index }}" onchange="errorDet2D.toggleCanvasMeshSelection({{mesh.index}})"
															{% if mesh.deletable %}{%else%} disabled {% endif %}>
														<label for="mesh{{ mesh.index }}" > {{ mesh.name }}</label>
													</td>
													{% if scene.calibrated %}
														<td style="text-align:center; vertical-align:bottom;">
															<span id="mesh{{mesh.index}}error"></span> px
														</td>
													{% endif %}
													
													{% if admin %}
														<td style="text-align:right; vertical-align:bottom;"> <form action='adminModify' method='post'>
															   <input type='hidden' name='scene' value='{{scene.index}}'>
															   <input type='hidden' name='rewriteMesh' value='{{mesh.index}}'>
															   <input type='submit' style="cursor:pointer;" value='Rewrite Mesh'>
															 </form>
													   </td>
													 {% endif %}
												</tr>
											{% endfor %}
										</table>
								</div><!-- end optionspanel -->
						{% endif %}
				
                        
						{% if pointCorrespondences %}
							<h3>Points</h3>
							<div class='optionspanel'>
								<table style="table-layout:fixed; width:100%">
										<tr>
												<th style="text-align:left; vertical-align:bottom;"> Name </th>
												{% if scene.calibrated %}
														<th style="text-align:center; vertical-align:bottom;"> Error (px) </th>
												{% endif %}
										</tr>
										{% for corr in pointCorrespondences %}
												<tr>
													<td style="text-align:left; vertical-align:bottom;">
														<input type="checkbox" name="corrCheckList" id="corr{{ corr.index }}" onchange="errorDet2D.toggleCanvasPointSelection({{corr.index}})"
															{% if corr.deletable %}{%else%} disabled {% endif %}>
														<label for="corr{{ corr.index }}" > Point {{ corr.index }}</label>
													</td>
													{% if scene.calibrated %}
														<td style="text-align:center; vertical-align:bottom;"> 
															<span id="corr{{corr.index}}error">{{corr.pixelProjectionError|floatformat}}</span>
														</td>
													{% endif %}
												</tr>
										{% endfor %}
								</table>
							</div><!-- end optionspanel -->
						{% endif %}

						<form id="meshBoxForm" method="post" action="delete" onsubmit="return errorDet2D.dumpToHTML()">
							<input type="hidden" name="points" id="pointsSelected" value="">
							<input type="hidden" name="meshes" id="meshesSelected" value="">
							<input type="hidden" name="scene" value="{{scene.index}}">
							<input type="Submit" style="cursor:pointer;" value="Delete Selected Meshes and Points" />
							<div id="warning"></div>
						</form>
				
				   </div><!-- end group -->
				</div><!-- end optionspanel -->
				<span id="sizeU" style="display:none">
				<span id="sizeV" style="display:none">
                
            </div>
            <div id="rightgroup">
                <div id="gecontainer">
                    <div id='map3d'></div>
                    <input type='button' style="cursor:pointer;" value="Reset View" 
			       onclick="jumpToFull({{scene.cameraLatitude}}, {{scene.cameraLongitude}}, {{scene.cameraAltitude}},{{scene.cameraRoll}}, {{scene.cameraTilt}}, {{scene.cameraHeading}});" />
                </div>
                
            </div>
        </div><!-- end above -->

    {% else %}
        <div class="group">
            You must be logged in to view this page.
            Click <a href="{{logInURL}}">here</a> to log in.
        </div>
    {% endif %}


    <div style="clear: both;"></div>
    </div><!-- end contentpage --> 
{% endblock %}
		
{% block scripts2 %} {% endblock %}
